import * as echarts from 'echarts/core';
/**
 * 数据分析  人员数据分析（学历分布）——3D柱状图
 * 
 * **/


const indexEcharts3DBar = (data, myChart) => {

    let x = ['研究生及以上', '本科', '大专', '中专', '高中及以下'];
    let y = [10, 20, 30, 40, 50,];
    const wid = 20;
    const w1 = Math.sin(Math.PI / 6) * wid; //4
    const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
    const snapHeight = wid / 2;

    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x - w2, shape.y]
            const c2 = [shape.x - w2, xAxisPoint[1]]
            const c3 = [shape.x, xAxisPoint[1]]
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
    })
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x, xAxisPoint[1]]
            const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight]
            const c4 = [shape.x + w1, shape.y - w2 + snapHeight]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
    })
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            //
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x + w1, shape.y - w2 + snapHeight] //右点
            const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight]
            const c4 = [shape.x - w2, shape.y]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
    })
    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft)
    echarts.graphic.registerShape('CubeRight', CubeRight)
    echarts.graphic.registerShape('CubeTop', CubeTop)



    const defaultConfig = {
        tooltip: {
            show: false,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },

        },
        grid: {
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: x,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#3e6f8e',
                    width: 1
                }
            },
            axisTick: {
                show: false,
                length: 9,
                alignWithLabel: true,
                lineStyle: {
                    color: '#AAA'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(27, 202, 242, .2)',
                    width: 1
                }
            },
            axisLabel: {
                interval: 0,
                color: '#FFF',
                fontSize: 12,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#ffffff',
                    opacity: 0.2,
                    width: 1
                }
            },
        },
        yAxis: {
            name: '',
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(27, 202, 242, .2)',
                    width: 1
                }
            },
            axiosTick: {
                show: false
            },
            axisLabel: {
                color: '#FFF',
                fontSize: 12,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(5, 80, 123, .1)',
                    type: 'dashed',
                    width: 1
                }
            },


        },
        series: [
            {
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        fontSize: 12,
                        color: '#059de6',
                        formatter: function (params) {
                            return params.value + '%'
                        },
                        offset: [0, -10],
                    },
                },
                tooltip: {
                    show: false
                },
                itemStyle: {
                    color: 'transparent',
                },
                data: y,
            },
            {
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    location[0] = location[0] + wid * 0;
                    const xlocation = api.coord([api.value(0), 0]);
                    xlocation[0] = xlocation[0] + wid * 0;
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: xlocation
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#059de6'
                                },
                                {
                                    offset: 1,
                                    color: '#059de6'
                                }
                                ])
                            }
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: xlocation
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#254193'
                                },
                                {
                                    offset: 1,
                                    color: '#254193'
                                }
                                ])
                            }
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: xlocation
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#17e0fe'
                                },
                                {
                                    offset: 1,
                                    color: '#17e0fe'
                                }
                                ])
                            }
                        }]
                    }
                },
                color: 'blue',
                data: y
            }]
    }


    const opt = { ...defaultConfig };
    return opt;
};

export default {
    indexEcharts3DBar
}

